<template>
    <div class="main">
        <PageTitle title=" 品牌方/设计师账号列表" addUrl="/Addaccount/none"></PageTitle>
        <el-table
            :data="tableData"
            style="width: 100%"
        >
            <el-table-column
                width="80"
                prop="id"
                label="ID"
                >
            </el-table-column>
            <el-table-column
                prop="username"
                label="账号"
                >
            </el-table-column>
            <el-table-column
                width="120"
                prop="address"
                label="类型">
                <template slot-scope="scope">
                    {{scope.row.state ==2?'品牌方':scope.row.state ==3?'设计方':scope.row.state ==4?'渠道方':'已注销'}}
                </template>
            </el-table-column>
            <el-table-column
                width="120"
                prop="than"
                label="提现比例"
                >
            </el-table-column>
            <el-table-column
                prop="token"
                label="token"
                >
            </el-table-column>
            <el-table-column
                prop="create_at"
                label="创建时间">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="150"
            >
                <template slot-scope="scope">
                    <el-button
                    @click.native.prevent="Logout(scope.row.id)"
                    type="text"
                    :disabled="scope.row.state==5"
                    size="small">
                    注销
                    </el-button>
                    <router-link
                        :to="'/Addaccount/' + scope.row.id"
                        class="el-button el-button--text"
                    >查看</router-link>
                    <el-button
                    @click.native.prevent="deleteRow(scope.row.id)"
                    type="text"
                    size="small">
                    删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class='pagination-wrapper'>
            <el-pagination
                layout="prev, pager, next"
                @current-change="pageChange"
                :page-size="pageSize"
                :total="totalCount"
                :current-page="pageNum"
            >
            </el-pagination>
        </div>
        <el-dialog
            title="上传退款保证金图片后注销"
            :visible.sync="dialogVisible"
            width="200px">
            <Upload
                :fileListArr="margin"
                :fileListName="'margin'"
                :fileMaxCount="1"
                @fileChange="fileChange"
            ></Upload>
           
        </el-dialog>

    </div>
</template>
<script>
import PageTitle from '@/components/pageTitle/PageTitle.vue'
import Upload from '@/components/upload/Upload.vue'
export default {
    components: {
      PageTitle,
      Upload
    },
    data(){
        return{
            dialogVisible:false,
            tableData: [],
            pageNum: 1,
            pageSize: 10,
            totalCount: 0,
            margin:[],//保证金图片
            id:null,
        }
    },
    created(){

    },
    activated(){
        this.getList()
    },
    methods:{
        //上传保证金图片
        async isLogout(id){
            let {data:{code,data}} = await this.$axios({
                url: this.$api + '/v1/channel/refund',
                method:'POST',
                data:{
                    id:this.id,
                    refund:id
                }
            })
            console.log('图片上传成功---------',data)
            if (code == 0) {
                this.$message({
                    message: data,
                    type: 'success'
                });
                this.getList()
                this.dialogVisible = false
            }else{
                
                this.margin = []
            }
        },
        //上传图片
        fileChange(data) {
            console.log('上传图片data------',data)
            if (data.arr.length>0) {
                this.isLogout(data.arr[0].id)
            }
        },
        //注销账号
        Logout(e){
            this.margin = []
            this.id = e
            this.dialogVisible = true
        },
        //获取列表
        async getList(){
            let data = await this.$axios({
                url: this.$api + '/v1/order/brand',
                method: 'GET',
                params:{
                    size: this.pageSize,
                    page: this.pageNum
                }
            })
            console.log('列表---------',data)
            if (data.data.code == 0) {
                this.tableData = data.data.data.item
                this.totalCount = parseInt(data.data.data.pages.totalCount)
            }
        },
        //翻页
        pageChange(pageNum) {
            this.pageNum = pageNum,
            this.getList()
        },
        //删除
        deleteRow(id){
            console.log('删除-------',id)
            this.$confirm('确认删除吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.del(id)
            })
        },
        async del(id) {
            let { data: { code, data } } = await this.$axios({
                url: this.$api + '/v1/order/strike',
                method: 'POST',
                data: {
                    id
                }
            })
            if (code == 0) {
                this.$message.success(data)
                this.getList()
            }
        },
    }
}
</script>